<template>
  <div class="otherCheckBox">
    <el-checkbox-group v-model="sizeCheckbox" class="siftCheckbox">
      <el-checkbox-button
        @change="sizeCheckboxChange(sizeV)"
        v-for="sizeV in sizeCheckboxOP"
        :label="sizeV"
        :key="sizeV"
      ></el-checkbox-button>
    </el-checkbox-group>
  </div>
</template>

<script>
const sizeCheckboxOP = ["大", "小"];
export default {
  name: "otherCheckBox",
  data() {
    return {
      sizeCheckboxInitV: false,
      sizeCheckbox: [],
    };
  },
  created() {
    this.sizeCheckbox = sizeCheckboxOP;
  },
  watch: {
    sizeCheckbox(currentChecked, oldVal) {
      if (!this.sizeCheckboxInitV) {
        return;
      }

      this.setVisibilityByName(
        currentChecked,
        oldVal,
        this.sizeCheckboxSetVisibility,
        sizeCheckboxOP
      );
    },
  },
  methods: {
    //// 公共方法开始
    // 在最后一个按钮取消选中，自动让另一个选中。判断出哪个这个checkbox group 里的两个中哪个需要显示或者隐藏
    setVisibilityByName(
      currentChecked,
      oldVal,
      SetVisibilityMethod,
      thisCheckedNameArrOP
    ) {
      let visibilityV = "visible";
      let currentCheckedSize = currentChecked.length;
      let anotherOP;

      // 两个按钮当前选中的的三种情况：0,1,2
      if (currentCheckedSize == 0) {
        // 两个都取消了，所以自动选中另一个
        if (oldVal[0] == thisCheckedNameArrOP[0]) {
          // 点击的是第一个
          anotherOP = [thisCheckedNameArrOP[1]];
          this.switchChecked(thisCheckedNameArrOP, anotherOP);
          SetVisibilityMethod(thisCheckedNameArrOP[1], visibilityV);
        } else {
          // 点击的是第二个
          anotherOP = [thisCheckedNameArrOP[0]];
          this.switchChecked(thisCheckedNameArrOP, anotherOP);
          SetVisibilityMethod(thisCheckedNameArrOP[0], visibilityV);
        }
      } else {
        if (currentCheckedSize == 1) {
          // 是取消
          visibilityV = "hidden";
          if (currentChecked[0] == thisCheckedNameArrOP[0]) {
            // 点击的是双
            SetVisibilityMethod(thisCheckedNameArrOP[1], visibilityV);
          } else {
            SetVisibilityMethod(thisCheckedNameArrOP[0], visibilityV);
          }
        } else {
          // 当前两个都选中的情况
          if (oldVal[0] == thisCheckedNameArrOP[0]) {
            // 旧值里是单时，说明点击的是双
            SetVisibilityMethod(thisCheckedNameArrOP[1], visibilityV);
          } else {
            SetVisibilityMethod(thisCheckedNameArrOP[0], visibilityV);
          }
        }
      }
    },
    switchChecked(thisCheckedNameArrOP, anotherOP) {
      switch (thisCheckedNameArrOP) {
        case this.oddEvenOP:
          this.oddEven = anotherOP; // 会再次执行watch 里的方法
          break;
        case this.combineOEOP:
          this.combineOE = anotherOP;
          break;
        case sizeCheckboxOP:
          this.sizeCheckbox = anotherOP;
          break;
      }
    },

    setVisibility(condition, ballIndex, visibilityV, hiddenFlag) {
      if (condition) {
        if (visibilityV == "hidden") {
          this.ballData[ballIndex]["siftflag"].add(hiddenFlag);

          if (this.ballData[ballIndex].visibility != visibilityV) {
            if (!this.ballData[ballIndex]["siftflag"].has("ballVisible")) {
              this.ballData[ballIndex].visibility = visibilityV;
            }
          }
        } else if (
          this.ballData[ballIndex]["siftflag"].has(hiddenFlag) ||
          this.ballData[ballIndex]["siftflag"].size == 0
        ) {
          this.ballData[ballIndex]["siftflag"].delete(hiddenFlag);

          if (
            this.ballData[ballIndex].visibility != visibilityV &&
            this.ballData[ballIndex]["siftflag"].size == 0
          ) {
            this.ballData[ballIndex].visibility = visibilityV;
          }
        }
      }
    },
    //// 公共方法结束
  },
};
</script>

<style>
.siftCheckbox {
  margin: 10px 10px;
}
</style>
